<template>
  <div>
    <nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
      <a class="navbar-brand" href="#">贝尔宾团队角色测试</a>
    </nav>
    <nav
      class="navbar navbar-expand-sm bg-primary navbar-dark fixed-bottom justify-content-end"
      v-show="isFinished"
    >
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" @click="goNext">下一步</a>
        </li>
      </ul>
    </nav>
    <div class="container-subjects" style="margin-top:20px;margin-bottom:80px;text-align:left;">
      <Subject
        v-for="content in baseData"
        :key="content.id"
        :content="content"
        @setValue="setValue($event)"
      ></Subject>
    </div>
  </div>
</template>

<script>
import Subject from "@/components/views/MainViewComponents/Subject.vue";
export default {
  name: "MainView",
  data() {
    return {
      isFinished: false
    };
  },
  components: {
    Subject
  },
  computed: {
    devMode() {
      return this.$store.state.devMode;
    },
    baseData() {
      return this.$store.state.baseData;
    }
  },
  methods: {
    setValue(data) {
      this.$store.commit("setValue", data);
      this.checkFinished();
    },
    checkFinished() {
      //window.console.log(this.$store.state.scoreData);
      for (let i = 0; i < this.$store.state.scoreData.length; i++) {
        if (this.$store.state.scoreData[i] == null) {
          this.isFinished = false;
          return false;
        }
      }
      this.isFinished = true;
      return true;
    },
    goNext() {
      this.$store.commit("routerNext");
      this.$router.push(this.$store.state.routerData.nextView);
      if (this.devMode) {
        window.console.log(this.$store.state.routerData.nextView);
      }
    }
  }
};
</script>

<style scoped>
p {
  text-align: justify;
}
.container-subjects {
  padding: 0 0 100px 0;
}
</style>